<template>
	<div class="basic_wrap">
    <div class="newTitle">
      <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
      <div class="title">提现</div>
    </div>
		<div class="desc_warp">
      <img src="@/assets/img/bIcon.png">
			<div class="flex_center userBalance">
        USDT-TRC20(TRON)
			</div>
      <div style="font-size: 16px;font-weight: bold;margin-top: 10px">
        <span style="font-size: 14px">余额：</span>{{detail.money}}U</div>
		</div>
    <div class="inputItem">
      <div class="inpTop">提现地址</div>
      <input type="text" v-model="detail.usdt_address" placeholder="请输入提现地址">
    </div>
    <div class="inputItem">
      <div class="inpTop">提现金额</div>
      <input type="number" placeholder="请输入提醒金额" v-model="money">
      <div class="tip" style="margin-top: 5px;color: red" v-if="withdraw_min">*最少提现{{withdraw_min}}</div>
    </div>
    <div class="inputItem">
      <div class="inpTop">支付密码</div>
      <input type="password" placeholder="请输入支付密码" v-model="pay_password">
    </div>
<!--		<div class="withdraw_wrap">-->
<!--			<div class="block_div item choose_wallet">-->
<!--				<div class="flex_center">-->
<!--					<p>{{$t('withdraw.account')}}</p>-->
<!--					<div @click="show=true">-->
<!--						<span>{{withdraw_name}}</span>-->
<!--						<van-icon name="arrow" color="#999" />-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--			<van-action-sheet v-model="show" :actions="wallets" cancel-text=""-->
<!--				:description="$t('withdraw.accountPlaceholder')" close-on-click-action @select="onSelect" />-->
<!--			<div class="block_div item">-->
<!--				<div class="">-->
<!--					<p class="withdraw_money_tips">{{$t('withdraw.amount')}}</p>-->
<!--					<div class="flex_center">-->
<!--						<van-field v-model="wallet.money" type="number"-->
<!--							:placeholder="$t('withdraw.amountPlaceholder')" />-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<p class="withdraw_time_tips">-->
<!--			{{$t('withdraw.withdrawNum')}}{{withdraw_num}}{{$t('utils.times'+times)}}<br>-->
<!--			{{$t('withdraw.withdrawAmount')}}{{common.currency_symbol_basic()}}{{common.precision_basic(withdraw_min)}}<br>-->
<!--			{{$t('withdraw.withdrawTips')}}-->
<!--		</p>-->
<!--    :class="wallet.money>0?'':'no_touch'"-->
		<div class="basic_btn btn"  @click="submit()">
			提现
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
	import {
		Icon,
		ActionSheet,
		Field
	} from 'vant';
	Vue.use(Icon).use(ActionSheet).use(Field);
	export default {
		name: "",
		components: {
			bsHeader
		},
		data() {
			return {
        detail:{},
        pay_password:'',
        money:null,
        withdraw_min:0
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FFFFFF');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer('user', false);
		},
		mounted() {
      if(localStorage.getItem("withdraw_min")){
        this.withdraw_min = Number(localStorage.getItem("withdraw_min"));
      }
			this.start();
		},
		methods: {
			start() {
        Fetch('/user/info',{
          isapp: 0
        }).then((r) => {
            this.detail = r.data
        });
			},
			onSelect(item) {
				if (item.value == 0) {
					this.$router.push('/wallet')
				}
				this.withdraw_name = item.name;
				this.wallet.id = item.value;
			},
			changeAmount() {},
			submit() {
				if (!this.money) {
					this.$toast('请输入提现金额');
					return false;
				}
        if (!this.detail.usdt_address) {
          this.$toast('请输入提现地址');
          return false;
        }
        if (!this.pay_password) {
          this.$toast('请输入支付密码');
          return false;
        }
				if (Number(this.money) - Number(this.detail.money) > 0) {
          this.$toast('没有那么多余额哦');
					return false;
				}
        if (this.money == 0) {
          this.$toast('提现金额不能为0');
          return false;
        }
				Fetch('/user/withdraw', {
          money:this.money,
          pay_password:this.pay_password,
          usdt_address:this.detail.usdt_address,
				}).then(r => {
					this.$router.replace('/withdraw/record');
				})
			},
			showMsg() {
				this.$dialog.alert({
					closeOnClickOverlay: true,
					showConfirmButton: false,
					message: "<p style='text-align: left'>" +
						this.$t('withdraw.frozenAmount') +
						this.common.currency_symbol_basic()+
						this.common.precision_basic(this.frozenAmount) +
						" " +
						"<br>" +
						this.$t('withdraw.needInvest') +
						"</p>",
				}).catch(() => {
					// on close
				});
			}
		}
	};
</script>

<style lang="less" scoped>
  .basic_wrap{
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    .newTitle{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .backIcon{
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(-50%,-50%);
        width: 16px;
        height: 16px;
      }
      .title{
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
	.red_top_bg {
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.record {
			position: absolute;
			top: 11px;
			right: 15px;

			img {
				width: 22px;
				height: 22px;
			}
		}
	}
  .inputItem{
    margin-left: 16px;
    margin-bottom: 14px;
    .inpTop{
       font-size: 14px;
       font-weight: bold;
      margin-bottom: 10px;
    }
    input{
      background: #EFF5FF;
      width: 91vw;
      height: 40px;
      border-radius: 8px;
      padding: 0 10px;
    }
  }
	.desc_warp {
		margin-top: 60px;
		text-align: center;
    margin-bottom: 40px;
		.userBalance{
			justify-content: center;
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
		}
		img {
			width: 100px;
			height: 100px;
		}

		p:nth-child(2) {
			font-size: 14px;
			color: #999;
		}

		p:nth-child(3) {
			font-size: 20px;
			font-weight: bold;
			margin: 10px 0;
		}
	}

	.withdraw_wrap {
		.item {
			margin-bottom: 10px;
			padding: 20px;

			.flex_center {
				justify-content: space-between;
			}

			.withdraw_money_tips {
				margin-bottom: 10px;
			}

			.money_mark {
				font-size: 18px;
				font-weight: bold;
				margin-left: 6px;
			}

			div:nth-child(1) {
				font-size: 14px;
				// font-weight: bold;
				color: #999;
			}

			// div:nth-child(2) {
			// 	text-align: right;
			// 	font-size: 14px;
			// 	font-weight: bold;
			// 	color: #999;
			// }
		}

	}

	.withdraw_time_tips {
		padding: 10px 16px 14px 16px;
		line-height: 2;
		font-size: 12px;
		color: #f12211;
	}

	.btn {
		width: 80%;
		margin: 50px 0 0 10%;
    border-radius: 8px;
	}

	/deep/ .van-cell {
		padding: 10px 16px 10px 10px;
	}

	/deep/ .van-action-sheet__item {
		text-align: left;
	}

	/deep/ .van-action-sheet__item {
		padding: 10px 16px;
		font-size: 14px;
	}

	/deep/ .van-dialog__message {
		text-align: left;
	}
	/deep/.van-action-sheet{
		padding-bottom: 10px;
	}
</style>
